<template>
	<div id="hotelOrder">
		<Load v-if="loading"></Load>
		<div>
			<div class="top">
				<div class="query">
					<div class="querys">
						<p>
							<span>订单号</span>
							<el-input v-model="query.orderId" size="mini"></el-input>
						</p>
						<p>
							<span>入住人</span>
							<el-input v-model="query.customerName" size="mini"></el-input>
						</p>
						<p>
							<span>预定日期</span>
							<el-date-picker
						      type="date"
						      v-model="query.startData"
						      size="mini">
						    </el-date-picker>
						</p>
						<p>
							<span>至</span>
							<el-date-picker
						      type="date"
						      v-model="query.endData"
						      size="mini">
						    </el-date-picker>
						</p>
					</div>
					<div>
						<el-button @click="search" class="search" type="primary">查询</el-button>
					</div>
				</div>
			</div>
			<div class="middle">
				<p class="tag">状态：</p>
				<div class="status">
					<p :class="{'active':stat.key==active}" @click="chooseStatus(stat.key)" v-for="stat in status">{{stat.name}}</p>
				</div>				
			</div>
			<div class="bottom">
				<table>
					<tr>
						<th>酒店名</th>
						<th>入住人</th>
						<th>入住时间</th>
						<th>金额</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
					<tbody v-for="order in data">
						<tr class="title">
							<td colspan="6">
								<div class="left">
									<span>订单号：</span>
									<span @click="detail(order)" class="orderId">{{order.supplierOrderId}}</span>
								</div>
								<div class="right">
									<span>预定日期：</span>
									<span>{{order.createTime|date}}</span>
								</div>
							</td>						
						</tr>
						<tr>
							<td>{{order.hotelName}}</td>
							<td>{{order.customerName}}</td>
							<td>{{order.arrivalDate|date}}</td>
							<td class="count">{{order.totalPrice}}</td>
							<td>{{order.status|hotelStatus}}</td>
							<td class="handle">
								<el-button @click="pay" class="pay">支付</el-button>
								<el-button @click="cancel" class="cancel">取消</el-button>
							</td>
						</tr>
					</tbody>
				</table>				
			</div>
			<div class="pagination">
				<el-pagination
				    layout="prev, pager, next"
				    @current-change='pageChange'
				    :page-size='query.pageSize'
				    :total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	@import "../../../style/mixin.scss";
	@import "./style.scss";
</style>